<template>
  <div>
    <el-menu class="el-menu-vertical-demo"
             @open="handleOpen"
             @close="handleClose"
             :collapse="isCollapse"
             :default-active="activeIndex"
    >
<!--      default-openeds="['1']"-->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-caret-bottom"></i>
          <span slot="title">选择</span>
        </template>
        <el-menu-item-group>
          <router-link to="/">
            <el-menu-item index="/">测试一下</el-menu-item>
          </router-link>
          <router-link to="/AdditionBody">
            <el-menu-item index="/AdditionBody">加法特训</el-menu-item>
          </router-link>
          <router-link to="/SubtractionBody">
            <el-menu-item index="/SubtractionBody">减法特训</el-menu-item>
          </router-link>
          <router-link to="/MultiplicationBody">
            <el-menu-item index="/MultiplicationBody">乘法特训</el-menu-item>
          </router-link>
          <router-link to="/DivisionBody">
            <el-menu-item index="/DivisionBody">除法特训</el-menu-item>
          </router-link>
        </el-menu-item-group>
          <el-menu-item-group title="错题集">
            <router-link to="/wrongSet">
              <el-menu-item index="/wrongSet">我的错题集</el-menu-item>
            </router-link>
        </el-menu-item-group>
        <el-menu-item-group title="添加随机数据">
          <router-link to="/Count">
            <el-menu-item index="/Count">添加后台</el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>

    </el-menu>
  </div>
</template>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>


<script>
export default {
  name: 'CommonAside',
  data() {
    return {
      isCollapse: false,
      activeIndex: this.$route.path
    };
  },
  mounted() {
    this.expandAll()
  },
  watch:{
    '$route'(to){
      this.activeIndex=to.path
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 默认展开函数
    expandAll () {
      const els = this.$el.getElementsByClassName('el-table__expand-icon')
      for (let i = 0; i < els.length; i++) {
        els[i].click()
      }
    }

  }
}
</script>

<style>
/*解决黑边问题*/
.el-header {
  background: #fff!important;
}
/*去下划线*/
a {
  text-decoration: none;
  color: #fff;
}
</style>